import React from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { BellOutline } from 'antd-mobile-icons'

function Index() {
  const nav = useNavigate()
  
  const handleBack = () => {
    
    nav(-1) // 返回上一个页面
  }

  return (
    <div style={{backgroundColor:'#f5f5f5',minHeight:'100vh'}}>
      <NavBar onBack={handleBack}>系统通知</NavBar>
      <div style={{textAlign:'center',color:'#9e9e9e',fontSize:'12px',padding:'8px 0'}}>星期四 上午 10:34</div>

      <div
        style={{
          margin:'0 12px',
          background:'#ffffff',
          borderRadius:'10px',
          boxShadow:'0 0 0 1px rgba(0,0,0,0.03)',
          padding:'12px',
        }}
      >
        <div style={{display:'flex'}}>
          <div style={{
            width:'36px',
            height:'36px',
            borderRadius:'50%',
            backgroundColor:'#3674ff',
            display:'flex',
            alignItems:'center',
            justifyContent:'center',
            marginRight:'12px',
            flex:'0 0 auto'
          }}>
            <BellOutline color="#ffffff" />
          </div>
          <div style={{flex:1}}>
            <div style={{lineHeight:1.8,fontSize:'14px'}}>
              <div>感谢使用【妙手医生】服务！</div>
              <div>挂号、问诊、购药，上妙手医生！</div>

              <div style={{marginTop:'8px'}}>★ 近期热门推荐</div>
              <div>✦ 名医直播义诊，医生与你面对面</div>
              <div>
                <a style={{color:'#1677ff'}} href="/view">点此进入！</a>
              </div>

              <div style={{marginTop:'8px'}}>★ 我们提供便捷的就医服务 𓃠</div>
              <div>我要 ☞ <a style={{color:'#1677ff'}} href="/yu">预约挂号</a></div>
              <div>我要 ☞ <a style={{color:'#1677ff'}} href="/ji">极速问诊</a></div>
              <div>我要 ☞ <a style={{color:'#1677ff'}} href="/more">专家问诊</a></div>

              <div style={{marginTop:'8px'}}>★ 您的专属服务</div>
              <div>☞ <a style={{color:'#1677ff'}} href="/doctor">我的医生</a></div>
              <div>☞ <a style={{color:'#1677ff'}} href="/one">我的问诊记录</a></div>
              <div>☞ <a style={{color:'#1677ff'}} href="/two">我的用药记录</a></div>
              <div>☞ <a style={{color:'#1677ff'}} href="/three">我的挂号记录</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
